import React, { Component } from 'react'

import { useParams, useLocation, useSearchParams } from 'react-router-dom'
//useParams 用来获取路由参数
// useLocation  用来获取state数据
// useSearchParams 用来获取查询字符串(不常用)
export default function Detail() {
  const { id } = useParams()
  const { state } = useLocation()
  const [searchParams, setSearchParams] = useSearchParams()
  console.log(searchParams.get('name'))
  console.log(searchParams.get('age'))

  return (
    <div>
      detail的内容~~~
      <p>路由参数: {id}</p>
      <p>state: {state}</p>
      <p>查询字符串: {searchParams.get('name')}</p>
      <button
        onClick={() => {
          setSearchParams('name=xxx&age=999')
        }}
      >
        修改查询字符串
      </button>
    </div>
  )
}
